<template>
	<div class="WechatWallet">
	  
	  <!-- 顶部 -->
	  <div class="top">
		  <!-- 返回标志 -->
		  <div class="back">
			  <router-link to="/Zichan">
				  <!-- <span class="bback"><</span> -->
				  <img class="bback" src="../../com.jz.youyu/ic_toolbar_back_arrow.png" />
			  </router-link>
		  </div>
		  <!-- 现金标题 -->
		  <span class="title">微信钱包</span>
		  <!-- 编辑账户 -->
		  <div class="edit">
			  <button>✍</button>
		  </div>
		  <!-- 打钩 -->
		  <div class="gou">
			  <button class="gou" @click="dagou">☑</button>
		  </div>
	  </div>
	  
	  <!-- 下划线 -->
	  <hr width="100%" size="1" color="gainsboro" />
	  
	  <!-- 余额框 -->
	  <div class="account">
		  <div class="acc">
			  <div class="acctop">
				  <br />
				  <span class="acctt">0.00</span>
				  <br />
				  <span class="acctb">账户余额</span>
			  </div>
			  <hr width="80%" size="1" color="whitesmoke" style="margin-left: 29px;" />
			  <div class="accbleft">
				  <span class="accbt">0.00</span>
				  <br />
				  <span class="accbb">累计流入</span>
			  </div>
			  <div class="accbright">
				  <span class="accbt">0.00</span>
				  <br />
				  <span class="accbb">累计流出</span>
			  </div>
		  </div>
	  </div>
	  
	  <!-- 暂无流水记录 -->
	  <div class="liushui">
	  		  <img src="../../com.jz.youyu/skin_bg_empty_common.png" />
	  		  <span>暂无流水记录哦~</span>
	  </div>
	  
	  <!-- 记一笔 -->
	  <div class="record">
		  <button :style="styleObject" @click="jiyibi" v-show="jyb">记一笔</button>
	  </div>
	  
	  <van-popup v-model="showPicker"  position="bottom" :style="{ height: '100%' }">
	  	<div class="cashPopupTit">
	  		<img src="../assets/ar0.png" alt="" @click="jybback">
	  		<span>日常记账</span>
	  	</div>
	  	<van-tabs v-model="active">
	  		<van-tab title="支出">
	  			<div class="cashCal" :style="{background:bColor}">
	  				<span>{{sort}}</span>
	  				<input type="number" placeholder="0.00">
	  			</div>
	  			<div class="cashSortLists" >
	  				<div class="cashSortList" @click="bColor='orange';sort='餐饮'">
	  					<img src="../assets/icon/inicon_1.png" alt="">
	  					<p>餐饮</p>
	  				</div>
	  				<div class="cashSortList" @click="bColor='pink';sort='外出'">
	  					<img src="../assets/icon/inicon_2.png" alt="">
	  					<p>外出</p>
	  				</div>
	  				<div class="cashSortList" @click="bColor='blue';sort='美容'">
	  					<img src="../assets/icon/inicon_3.png" alt="">
	  					<p>美容</p>
	  				</div>
	  				<div class="cashSortList" @click="bColor='green';sort='人情'">
	  					<img src="../assets/icon/inicon_4.png" alt="">
	  					<p>人情</p>
	  				</div>
	  				<div class="cashSortList" @click="bColor='yellow';sort='居住'">
	  					<img src="../assets/icon/inicon_5.png" alt="">
	  					<p>居住</p>
	  				</div>
	  			</div>
	  			<div class="cashSortLists">
	  				<div class="cashSortList" @click="bColor='purple' ;sort='购物'">
	  					<img src="../assets/icon/inicon_6.png" alt="">
	  					<p>购物</p>
	  				</div>
	  				<div class="cashSortList" @click="bColor='palevioletred';sort='交通'">
	  					<img src="../assets/icon/inicon_7.png" alt="">
	  					<p>交通</p>
	  				</div>
	  				<div class="cashSortList" @click="bColor='blue';sort='娱乐'">
	  					<img src="../assets/icon/inicon_8.png" alt="">
	  					<p>娱乐</p>
	  				</div>
	  				<div class="cashSortList" @click="bColor='skyblue' ;sort='教育'">
	  					<img src="../assets/icon/inicon_9.png" alt="">
	  					<p>教育</p>
	  				</div>
	  				<div class="cashSortList"   @click="bColor='palegreen';sort='其他'">
	  					<img src="../assets/icon/inicon_10.png" alt="">
	  					<p>其他</p>
	  				</div>
	  			</div>
	  			
	  		</van-tab>
	  		<van-tab title="收入">
	  			<div class="cashCal" :style="{background:bColor}">
	  				<span>{{sort}}</span>
	  				<input type="number" placeholder="0.00">
	  			</div>
	  			<div class="cashSortLists" >
	  				<div class="cashSortList" @click="bColor='orange';sort='工资'">
	  					<img src="../assets/icon/inicon_1.png" alt="">
	  					<p>工资</p>
	  				</div>
	  				<div class="cashSortList" @click="bColor='pink';sort='收红包'">
	  					<img src="../assets/icon/inicon_2.png" alt="">
	  					<p>收红包</p>
	  				</div>
	  				<div class="cashSortList" @click="bColor='blue';sort='生活费'">
	  					<img src="../assets/icon/inicon_3.png" alt="">
	  					<p>生活费</p>
	  				</div>
	  				<div class="cashSortList" @click="bColor='green';sort='奖金'">
	  					<img src="../assets/icon/inicon_4.png" alt="">
	  					<p>奖金</p>
	  				</div>
	  				<div class="cashSortList" @click="bColor='yellow';sort='报销'">
	  					<img src="../assets/icon/inicon_5.png" alt="">
	  					<p>报销</p>
	  				</div>
	  			</div>
	  			<div class="cashSortLists">
	  				<div class="cashSortList" @click="bColor='purple' ;sort='兼职'">
	  					<img src="../assets/icon/inicon_6.png" alt="">
	  					<p>兼职</p>
	  				</div>
	  				<div class="cashSortList" @click="bColor='palevioletred';sort='借入款'">
	  					<img src="../assets/icon/inicon_7.png" alt="">
	  					<p>借入款</p>
	  				</div>
	  				<div class="cashSortList" @click="bColor='blue';sort='投资收益'">
	  					<img src="../assets/icon/inicon_8.png" alt="">
	  					<p>投资收益</p>
	  				</div>
	  				<div class="cashSortList" @click="bColor='skyblue' ;sort='不明收入'">
	  					<img src="../assets/icon/inicon_9.png" alt="">
	  					<p>不明收入</p>
	  				</div>
	  				<div class="cashSortList"   @click="bColor='palegreen';sort='其他收入'">
	  					<img src="../assets/icon/inicon_10.png" alt="">
	  					<p>其他收入</p>
	  				</div>
	  			</div>
	  			
	  			
	  		</van-tab>
	  	
	  	</van-tabs>
	  </van-popup>
	  
	</div>
</template>

<script>
	export default {
	  name: 'Home',
	  components: {
	  },
	  data() {
	  	return {
			// v-model
			jyb:true,
			
	  		y: 0,
			move:0,
			styleObject:{
				"top":'0px'
			},
			
			showPicker:false,
			active:0,
			sort:'餐饮',
			bColor:'red'
	  
	  	}
	  
	  },
	  methods:{
		
		dagou(){
			alert("?");
			this.$router.push("/cash");
		},
		// touchstart(e){
			
			
			
		// 	this.y=Math.round(e.targetTouches[0].clientY) 
		// 	console.log(this.y)
		// },
		// touchmove(e){
		// 	this.move=Math.round((e.targetTouches[0].clientY-this.y)/10) 
		// 	this.styleObject.top=this.move+'px'
		// 	// let cat =document.getElementsByClassName('middle-img')
		// 	// console.log(move)
		// 	// cat.style=move+'px'
			
		// },
		// touchend(e){
		// 	if(this.move>10){
		// 		this.showPicker=true;
		// 	}
			
		// 	this.styleObject.top='0px';
		// }
		jiyibi(){
			
				this.showPicker=true;
			
			this.styleObject.top='0px';
			this.jyb=false;
		},
		jybback(){
			this.showPicker=false;
			this.jyb=true;
		}
		  
	  },
	
	  
	}
</script>

<style>
	body{
		margin: 0;
		padding: 0;
		background-color: #F6F6F6;
	}
	/* 顶部 */
	.top{
		
		height: 35px;
		width: 100%;
		background-color: white;
	}
	.top>.back{
		height: 100%;
		width: 20px;
		margin-left: 7px;
		float: left;
		line-height: 42px;
	}
	a{
	  text-decoration: none;
	}
	.router-link:active{
		text-decoration: none;
	}
	/* .bback{
		color: red;
		font-size: 20px;
	} */
	.bback{
		width: 15px;
		height: 20px;
	}
	.top>.title{
		width: 25%;
		height: 100%;
		font-weight: 600;
		float: left;
		line-height: 35px;
	}
	.top>.gou{
		height: 100%;
		width: 50px;
		float: right;
		line-height: 35px;
	}
	.top>.gou>button{
		border: none;
		background-color: white;
		margin-top: 2px;
		height: 20px;
		width: 20px;
	}
	.top>.edit{
		height: 100%;
		width: 35px;
		float: right;
		line-height: 35px;
	}
	.top>.edit>button{
		border: none;
		background-color: white;
		text-align: center;
		margin-top: 2px;
		height: 20px;
		width: 20px;
	}
	
	/* 余额框 */
	.account{
		height: 120px;
		width: 100%;
		background-color: white;
	}
	.acc{
		height: 115px;
		width: 95%;
		background-color: #57DBDF;
		margin: 10px auto;
		border-radius: 8px;
	}
	.acctop{
		height: 50%;
		
	}
	.acctt{
		color: white;
	}
	.acctb{
		font-size: 7px;
		color: white;
	}
	.accbleft{
		width: 50%;
		float: left;
	}
	.accbleft>span,.accbright>span{
		color: white;
		font-size: 7px;
	}
	.accbright{
		width: 50%;
		float: right;
	}
	
	/* 暂无流水记录 */
	.liushui{
		height: 100%;
		width: 100%;
		margin-top: 0px;
		/* background-color: #F6F6F6; */
	}
	/* .liushui>.ls{
		height: 150px;
		width: 140px;
		margin: 25% auto;
	} */
	.liushui>img{
		height: 120px;
		width: 120px;
		display: block;
		margin: 10px auto;
		
	}
	.liushui>span{
		margin-bottom: 0px;
	}
	
	/* 记一笔 */
	.record{
		height: 35px;
		width: 100%;
		background-color: white;
		position: fixed;
		bottom: 0px;
		z-index: 99999;
	}
	.record>button{
		line-height: 35px;
		font-size: 17px;
		width: 100%;
		text-align: center;
		background-color: white;
		border: none;
	}
	
	/* 记一笔 */
	.cashPopupTit{
		width: 100%;
		height: 40px;
		
		position: relative;
		line-height: 40px;
	}
	.cashPopupTit>img{
		float: left;
		height: 20px;
		width: 10px;
		margin-left: 15px;
		margin-top: 10px;
	}
	.cashPopupTit>span{
		font-size: 16px;
		color: #e70861;
	}
	.cashCal{
		margin-top: 5px;
		width: 100%;
		background: orange;
		height: 60px;
		line-height: 60px;
	}
	.cashCal>span{
		float: left;
		margin-left: 20px;
		font-size: 18px;
		color: white;
	}
	.cashCal>input{
		border: none;
		float: right;
		text-align: right;
		background: no-repeat;
		font-size: 20px;
		color: wheat;
		margin-right: 20px;
	}
	.cashSortLists{
		width: 100%;
		
		display: flex;
		justify-content: space-around;
	}
	.cashSortList{
		width: 15%;
		
		text-align: center;
		margin-top: 15px;
	}
	.cashSortList>img{
		height: 20px;
		width: 20px;
	}
	.cashSortList>p{
		font-size: 14px;
	}
</style>
